<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" class="autoinsert" src="../js/jquery-2.2.0.min.js"></script>
        <link rel="stylesheet" href="../css/font_index_background.css">
<!--        <link rel="stylesheet" href="../css/font_top.css">-->
<!--        <link rel="stylesheet" href="../css/layer.css">-->
        <title>基于深度学习的道路能见度监测预警系统</title>
        <!-- for-mobile-apps -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="keywords" content=""/>
        <script type="application/x-javascript"> addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        } </script>
        <!-- //for-mobile-apps -->
        <link href="../css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="../css/city_detail.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="../css/animate.css" rel="stylesheet" type="text/css" media="all">
        <link rel="shortcut icon" href="../img/icon.jpg">
        <script src="../js/wow.min.js"></script>
<!--        <script src="../js/layer.js"></script>-->
        <script>
            new WOW().init();
        </script>
        <link href='http://fonts.googleapis.com/css?family=Kanit:400,100,100italic,200,200italic,300,300italic,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic'
              rel='stylesheet' type='text/css'>
        <script src="../js/responsiveslides.min.js"></script>

    </head>
    <body>
<!--        <div class='head' id="header"></div>-->
        <!-- banner -->
        <div class="banner w3ls" id="app">
            <div class="container">
                <div class="clearfix"></div>
                <div class="banner-info wow bounceInDown" data-wow-duration="1.5s" data-wow-delay="0s">
                    <div id="top" class="callbacks_container">
                        <ul class="rslides" id="slider3">
                            <li>
                                <div class="col-md-5 ban-left">
                                    <img src="../img/p10.jpg" :src="city.url" alt=" "/>
                                </div>
                                <div class="col-md-7 ban-right" style="margin-top: 50px">
                                    <h3>城市名：{{city.name}}</h3>
                                    <h3>地区雾浓度：{{city.value}}</h3>
                                    <p>建议：{{city.advice}}</p>
                                    <a class="hvr-rectangle-out" style="margin-top: 50px" target="_blank"
                                       href="http://106.55.57.114:8888/font/dataset_link.html">查看更多城市
                                    </a>
                                </div>
                                <div class="clearfix"></div>
                            </li>
                            <!-- <li>
                                <div class="col-md-5 ban-left">
                                    <img src="../img/p10.jpg" alt=" "/>
                                </div>
                                <div class="col-md-7 ban-right">
                                    <h3>We Have Best Design Experts With Good Ideas In Designing</h3>
                                    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
                                    odit aut fugit, sed quia consequuntur magni dolores eos.</p>
                                    <a class="hvr-rectangle-out" href="about.html">See More About Us</a>
                                </div>
                                <div class="clearfix"></div>
                            </li> -->
                        </ul>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <!-- //banner -->
        <script>
            // $("#header").load("top.html")
            // You can also use "$(window).load(function() {"
            $(function () {
                // Slideshow 4
                $("#slider3").responsiveSlides({
                    auto: true,
                    pager: false,
                    nav: true,
                    speed: 500,
                    namespace: "callbacks",
                    before: function () {
                        $('.events').append("<li>before event fired.</li>");
                    },
                    after: function () {
                        $('.events').append("<li>after event fired.</li>");
                    }
                });
            });
        </script>
        <script type="text/javascript" src="../js/bootstrap-3.1.1.min.js"></script>
        <script type="text/javascript" src="../js/vue.js"></script>
        <script src="../js/axios.min.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    city: {
                        name: '新余',
                        value: '无雾',
                        url: '',
                        advice: '今天新余天气不错，适合出门运动今天新余天气不错，适合出门运动今天新余天气不错'
                    }
                },
                methods: {
                    subStringOne: function (text, begin, end) {     //获取两个字符串之间的子字符串
                        var regex;
                        if (end == '\\n')
                            regex = RegExp(begin + '(.+)?');
                        else
                            regex = RegExp(begin + '([.\\s\\S]+?)' + end);
                        try {
                            return regex.exec(text)[1].trim()
                        } catch (err) {
                            return null;
                        }
                    },
                    p(s) {
                        return s < 10 ? '0' + s : s
                    }
                },
                created: function () {
                    // var dataName = decodeURI(this.GetQueryString("?city="), "utf-8");
                    var dataName = decodeURI(window.location.search);
                    //如果没有具体城市，则返回首页
                    if (!dataName) {
                        alert("系统未接收到合法城市名");
                        window.location.href = "http://106.55.57.114:8888/font/index.html"
                    } else {
                        if (dataName.indexOf("date") == -1) {//只有城市名，说明是今天
                            var cityName = dataName.substr("?city=".length)
                            console.log(cityName)

                            axios.get("http://106.55.57.114:8888/font/findOneCityDetail?city="+cityName).then((res)=>{
                                if (!res.data){  //如果没有数据
                                    if (confirm("哎呀~~~这天没有数据！！！快去联系管理员添加吧")) {
                                        window.location.href = "http://106.55.57.114:8888/font/index.html"
                                    }else {
                                        window.location.href = "http://106.55.57.114:8888/font/index.html"
                                    }
                                }else {
                                    this.city.url = "http://nitcs.ahalk.cn/img/"+res.data.url;
                                    //设置背景
                                    $(".banner").css("background","url("+this.city.url+") no-repeat 0px 0px");
                                    $(".banner").css("background-size","cover");
                                    this.city.name = res.data.city;
                                    console.log(this.city.url)
                                    if (res.data.level == 0) {
                                        this.city.value = "无雾";
                                        this.city.advice = "今天天气没有雾，道路能见度高，但仍需注意道路交通安全"
                                    }else if (res.data.level == 1){
                                        this.city.value = "轻雾"
                                        this.city.advice = "今天天气有轻雾，道路能见度较高，但仍需注意道路交通安全"
                                    }else {
                                        this.city.value = "浓雾"
                                        this.city.advice = "今天天气有浓雾，道路能见度底，但仍需注意道路交通安全"
                                    }
                                }
                            })
                        } else {//既有城市名也有时间，说明是某一天
                            //获取时间
                            var date = dataName.substr(dataName.lastIndexOf("=") + 1);
                            const d = new Date(date);
                            const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate())
                            console.log(resDate)
                            // 获取城市名
                            var cityName = this.subStringOne(dataName,"=","&")
                            console.log(cityName)

                            axios.get("http://106.55.57.114:8888/font/findOneCityDetail?city="+cityName+"&date="+resDate).then((res)=>{
                                if (!res.data){
                                    if (confirm("哎呀~~~这天没有数据！！！快去联系管理员添加吧")) {
                                        window.location.href = "http://106.55.57.114:8888/font/index.html"
                                    }else {
                                        window.location.href = "http://106.55.57.114:8888/font/index.html"
                                    }
                                }else {
                                    this.city.url = "http://nitcs.ahalk.cn/img/"+res.data.url;
                                    //设置背景
                                    $(".banner").css("background","url("+this.city.url+") no-repeat 0px 0px");
                                    // $(".banner").css("background-size","cover");
                                    $(".banner").css("background-size","100%");
                                    // console.log(res);
                                    this.city.name = res.data.city;
                                    console.log(this.city.url)
                                    if (res.data.level == 0) {
                                        this.city.value = "无雾";
                                        this.city.advice = "今天天气没有雾，道路能见度高，但仍需注意道路交通安全"
                                    }else if (res.data.level == 1){
                                        this.city.value = "轻雾";
                                        this.city.advice = "今天天气有轻雾，道路能见度较高，但仍需注意道路交通安全"
                                    }else {
                                        this.city.value = "浓雾";
                                        this.city.advice = "今天天气有浓雾，道路能见度底，但仍需注意道路交通安全"
                                    }
                                }
                            })
                        }
                    }
                }
            })
        </script>
    </body>
</html>